.show-detail-container
    display: flex
    position: fixed
    width: 100%
    padding-top: 67px
    background: $BgColor1
    flex-direction: column

    .show-header
        width: 100vw
        /*height: 25vh TODO: responsive header (especially poster)*/
        min-height: 215px

        .sh-backdrop
            .shb-img
                position: absolute
                min-height: 215px
                width: 100vw
                background-repeat: no-repeat
                background-size: cover
                background-position: center
                -webkit-filter: blur(60px) brightness(0.7)
                background-color $ShowBgColor1
                opacity: 0
                &.fadein
                    transition: opacity .3s ease-in;
                    opacity: 1

        .sh-poster
            float: left
            width: 198px
            height: 100%
            z-index: 20
            position: relative
            pointer-events: none
            transition: transform 0.05s ease-out

            .shp-img
                position relative
                margin-left 32px
                margin-top 10px
                width 134px
                height 197px
                box-shadow 0px 0px 10px
                background-size 100% 100%
                background-position center
                background-repeat no-repeat
                border-radius 4px
                opacity 0
                background-color $ShowBgColor1
                pointer-events auto
                cursor pointer
                &.fadein
                    transition: opacity .3s ease-in;
                    opacity: 1

        .sh-poster.active
            transform: scale(3.5)
            left: 180px
            top: 260px
            transition: transform 0.12s ease-out

        .sh-metadata
            float: left
            position: relative
            height: 194px
            width: calc(100% - 198px)
            padding-top: 10px
            padding-right: 45px

            .shm-title
                color #fff
                font-family $Font
                -webkit-font-smoothing antialiased
                font-size 28px
                margin-bottom 8px
                margin-top: 5px

            .shm-infos
                div
                    float: left
                    font-size: 11px
                    font-family: $MainFontBold
                    color: #fff
                    -webkit-font-smoothing: antialiased

                    &:not(.shmi-tmdb-link)
                        &:hover ~ div.shmi-tmdb-link
                            opacity: 0.4
                            transition-delay: .8s

                div.shmi-year
                    cursor: pointer

                div.shmi-tmdb-link
                    padding-left: 12px
                    padding-right: 6px
                    cursor: pointer
                    opacity: 0
                    transition: opacity .3s ease-in
                    transition-delay: .2s

                    &:hover
                        opacity: 1
                        transition-delay: 0s

                    &.disabled
                        &:hover
                            cursor: default
                            opacity: 0.4

                div.shmi-imdb
                    cursor: pointer
                    background: url(../images/icons/imdb.png) no-repeat
                    width: 27px
                    height: 16px
                    position: relative
                    top: -2px

                div.shmi-rating
                    cursor: pointer

                    .hidden
                        display: none

                    .number-container-tv
                        position: relative
                        font-size: 12px
                        font-family: $MainFontBold
                        color: #FFF

                        em
                            font-size: 0.8em

                    .star-container-tv
                        position relative
                        opacity 1

                        .rating-star
                            color #ffc900
                            font-size 11px
                            padding-right: 3px

                        .rating-star-half
                            color #ffc900
                            font-size 11px
                            margin-left -4px
                            padding-right: 3px

                        .rating-star-half-empty
                            color #a3a5a7
                            font-size 11px
                            margin-left: -4px

                        .rating-star-empty
                            color #a3a5a7
                            font-size 11px
                            padding-right: 3px

                        .rating-star-half-container
                            width 1em
                            height 1em
                            line-height 1em
                            margin-top: -3px;
                            margin-left: 4px;

                span.dot
                    margin 4.5px 15px 0 15px
                    float left
                    width 3px
                    height 3px
                    border-radius 2px
                    background-clip padding-box
                    background-color #dbdbdd
                    cursor default

            .shm-synopsis
                color: #fff
                float: left
                width: 100%
                text-align: justify
                font-family: $MainFont
                -webkit-font-smoothing: antialiased
                font-size: 12px
                line-height: 22px
                max-height: 107px
                padding-right: 8px
                margin-top: 8px
                overflow: hidden
                scrollable()

        .sh-metadata.active
            filter: blur(4px)
            pointer-events: none

        .sh-actions
            float: left
            position: relative
            width: calc(100% - 198px)
            height: 35px
            margin-top: -15px
            padding-right 45px

            display: flex
            flex-direction: row
            justify-content: space-between
            white-space: nowrap

            .dropdowns-container
                margin: -10px -30px 0 0

                #audio-dropdown .lang-dropdown
                    background: none

            .sha-bookmark
                float: left
                cursor: pointer
                padding-left: 24px
                color: #FFF
                position: relative
                font-family: $MainFont
                font-smoothing: antialiased
                font-size: 12px
                line-height: 37px
                margin-top: -2px
                &:before
                    content: "\f004"
                    font-family: "Font Awesome 6 Free"
                    font-weight: 900
                    position: absolute
                    font-size: 18px
                    color: #FFF
                    top: 0
                    left: 0
                    bottom: 0
                    right: 0
                    opacity: 1
                    transition: opacity 0.5s

                &:after
                    content: "\f004"
                    font-family: "Font Awesome 6 Free"
                    font-weight: 900
                    position: absolute
                    font-size: 18px
                    color: $ButtonBgActive
                    top: 0
                    left: 0
                    bottom: 0
                    right: 0
                    opacity: 0
                    transition: opacity 0.5s

                &:hover
                    &:before
                        opacity: 0

                    &:after
                        opacity: 1

                &.selected
                    height: 18px
                    width: 200px
                    &:before
                        content: "\f004"
                        font-family: "Font Awesome 6 Free"
                        font-weight: 900
                        position: absolute
                        font-size: 18px
                        color: $FavoriteColor
                        top: 0
                        left: 0
                        bottom: 0
                        right: 0
                        opacity: 1
                        transition: opacity 0.5s

                    &:after
                        content: "\f004"
                        font-family: "Font Awesome 6 Free"
                        font-weight: 900
                        position: absolute
                        font-size: 18px
                        color: #FFF
                        top: 0
                        left: 0
                        bottom: 0
                        right: 0
                        opacity: 0
                        transition: opacity 0.5s

                    &:hover
                        &:before
                            opacity: 0

                        &:after
                            opacity: 1

            .sha-watched
                float: left
                cursor: pointer
                padding-left: 28px
                margin-left: 20px
                color: #FFF
                position: relative
                font-family: $MainFont
                font-smoothing: antialiased
                font-size: 12px
                line-height: 37px
                margin-top: -2px
                display: none

                &:before
                    content: "\f070"
                    font-family: "Font Awesome 6 Free"
                    font-weight: 900
                    position: absolute
                    font-size: 18px
                    color: #FFF
                    left: 0
                    opacity: 1
                    transform: scaleY(0.9)
                    transition: opacity 0.5s

                &:after
                    content: "\f00c"
                    font-family: "Font Awesome 6 Free"
                    font-weight: 900
                    position: absolute
                    font-size: 20px
                    color: #299000
                    left: 0
                    opacity: 0
                    transition: opacity 0.5s

                &:hover, &.selected
                    &:before
                        opacity: 0
                    &:after
                        opacity: 1

        .sh-actions.active
            filter: blur(4px)
            pointer-events: none

    .show-details
        width: 100vw
        z-index: 1
        background: $ShowBgColor1
        height: calc(100vh - 282px)
        display: grid
        padding-left: 20px /* left-pad */
        gap: 10px;
        grid-template-columns: fit-content(165px) 2fr minmax(480px, 1fr);
        grid-template-rows: 2fr auto;
        grid-template-areas: "seasons  episodes overview" "torrents torrents overview";

        .sd-seasons ul, .sd-episodes ul
            position: absolute;
            top:45px;
            bottom:0;
            cursor: pointer
            direction: rtl
            white-space: nowrap
            scrollable()

            li
                padding: 0px 15px
                margin: 1px 0px 1px 1px
                float: left
                width: calc(100% - 7px)

                .watched
                    padding 9px 0
                    color: $ShowWatchedIcon_false
                    transition color .5s

                    &:hover
                        color: $ShowWatchedIcon_hover

                    &.true
                        color: $ShowWatchedIcon_true

            li:nth-child(odd)
                background-color $ShowBgColor2

            li:hover
                background $EpisodeSelectorHover

            li.active
                background-color $EpisodeSelectorBg
                position relative

                &:after
                    content ""
                    position absolute
                    top 0px
                    right -12px
                    width 0
                    height 0
                    border-color $ShowBgColor1 $ShowBgColor1 $ShowBgColor1 $EpisodeSelectorBg
                    border-style solid
                    border-width 16px 6px 17px 6px

            a
                text-decoration: none
                font-size: 15px
                line-height: 34px
                font-weight: normal
                float: left
                flex-direction: row
                direction: ltr

                span
                    float: left
                    margin: 0px 15px 0px 5px

                div
                    white-space: nowrap
                    border-left: 1px solid $ShowBgColor1
                    padding-left: 30px
                    text-align: left
                    overflow: hidden
                    text-overflow: ellipsis

        .sd-seasons, .sd-episodes
            position: relative;
            height: 100%;
            .sds-title, .sde-title
                font-size: 24px
                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap
                margin-bottom: 15px
                margin-top: 2px
                color: $ShowText1

        .sd-seasons
            min-width: 165px
            padding: 10px

            .sds-list ul a
                color: $SaisonListText
                font-family: $AlternateFont
                white-space: nowrap

        .sd-episodes
            grid-area: episodes;
            padding: 10px

            .sde-list ul
                width: calc(100% - 10px)

            .sde-list ul li a
                color: $EpisodeListText
                font-family: $MainFont
                min-width: 70px
                max-width: calc(60vw - 290px)

            .sde-list ul li.active a
                color: $EpisodeSelectorText

        .sd-overview
            background: $ShowBgColor2
            grid-area: overview;
            padding: 10px 30px 10px 18px /* right pad */
            display: grid
            grid-template-rows: auto 2fr

            .sdo-infos
                height: fit-content
                overflow-x: hidden

                .sdoi-title
                    overflow: hidden
                    white-space: nowrap
                    text-overflow: ellipsis
                    font-size: 24px
                    margin-top: 2px
                    padding-bottom: 6px
                    color: $ShowText1

                .sdoi-links
                    position: absolute
                    right: 42px
                    margin-top: -6px

                    &>div
                        padding: 5px 3px
                        cursor: pointer
                        position: relative

                    .health-icon
                        font-size: 14px
                        color: #737577
                        transition: all .3s ease-in

                        &.Bad
                            color: #d53f3f
                        &.Medium
                            color: #ece523
                        &.Good
                            color: #a3e147
                        &.Excellent
                            color: #2ad942

                    .magnet-icon
                        font-size: 13px
                        color: #DDD
                        margin-right: 2px

                        &:hover
                            color: #FFF
                            transition: all .5s

                    .source-icon
                        display: inline-block
                        font-size: 13px
                        color: #DDD
                        margin-right: 0px
                        top: 3px

                        &:hover
                            color: #FFF
                            transition: all .5s
                        img
                            height: 16px

                .sdoi-aired
                    font-size: 12px
                    line-height: 15px
                    margin-bottom: 10px
                    color: $ShowText2

                    .sdoi-date
                        overflow: hidden
                        white-space: nowrap
                        text-overflow: ellipsis

                .sdoi-synopsis
                    color: $ShowText1
                    font-size: 13px
                    line-height: 18px
                    text-align: justify
                    margin-top: 10px
                    padding: 2px 15px 5px 0
                    height: fit-content
                    scrollable()

            #torrent-list
                height: auto
                margin: 10px -10px 10px -5px

            .sdo-watch
                height: 60px
                padding: 5px 0px 15px 0px
                margin-bottom: -5px

                &.disabled
                    margin-bottom: 50px

                .play-selector
                    position: relative
                    float: right
                    margin-top: 6px

                    &.disabled
                        position: absolute
                        right: 5px
                        margin-top: -5px
                        cursor: pointer
                        opacity: 1
                        filter: none

                .show-all-torrents
                    float: left
                    font-family: $MainFont
                    -webkit-font-smoothing: antialiased
                    font-size: 11px
                    color: $ShowText1
                    transition: all .2s ease-in, margin 0s
                    padding: 0 6px
                    margin: 13px 6px 0 0
                    border-radius: 10px
                    height: 19px
                    line-height: 19px
                    cursor: pointer

                    &:hover, &.active
                        color: $QualitySelectorText
                        background: $QualitySelectorBg

                    &.fa-spinner
                        font-family: "Font Awesome 6 Free"
                        transition: none
                        margin-left: 6px

                        &:hover, &.active
                            background: none

                .sdow-quality
                    margin-top: 13px
                    float: left

                    div
                        cursor: pointer
                        float: left
                        font-family: $MainFont;
                        -webkit-font-smoothing: antialiased;
                        font-size: 11px
                        color: $ShowText1
                        transition: all .2s ease-in
                        padding: 4px
                        margin-right: 6px

                    .disabled
                        opacity: .3
                        cursor: default

                    .active
                        cursor: pointer
                        opacity: 1
                        color: $QualitySelectorText
                        background: $QualitySelectorBg
                        border-radius: 10px
                        font-family: $MainFontBold

                .sdow-watchnow
                    margin-top: 6px
                    float: right

                    &.disabled
                        visibility: hidden

                    #player-chooser
                        .button
                            margin-right: 0px

        .sd-torrents
            grid-area: torrents;
            max-height: 300px;

        > .spinner
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5) center center no-repeat;
            pointer-events: all;
            z-index: 1;

            .loading-container
                margin: 180px auto 0px
                opacity: .8;

    .show-details.active
        filter: brightness(50%) blur(4px)
        pointer-events: none
